<template>
    <div class="personalPage">
        <!-- 上版内容 -->
        <div class="top">
            <div class="head"> <!--个人信息面板-->
                <img src="../../assets/logo.png" alt="">
                <div class="name"> <!-- 昵称-->
                    <div>
                        <h4 class="nickname"> {{ userinfo.nickname }}</h4>
                    </div>
                    <div class="grade">
                        <a href="javascript:" style="text-decoration: none;">
                            <span> {{ userinfo.rank }}</span> <!-- 等级-->
                        </a>
                    </div>
                </div>
                <!-- 个人简介 -->
                <div class="introduce">
                    <span>{{ userinfo.brief }}</span>
                </div>
            </div>
            <div class="compile"> <!-- 编辑个人资料板块-->
                <router-link :to="{ name: 'Compile' }"> <!-- 跳转到编辑个人信息页面-->
                    <el-button type="primary" plain>编辑个人资料</el-button>
                </router-link>
            </div>

            <!-- 账号的关注 粉丝 积分 ....信息  -->
            <div class="information">
                <div class="row">
                    <span>关注:</span>
                    <span>{{ userinfo.followers }}</span>
                </div>
                <span>
                    |
                </span>
                <div class="row">
                    <span>粉丝:</span>
                    <span>{{ userinfo.fans }}</span>
                </div>
                <span>|</span>
                <div class="row">
                    <span>积分:</span>
                    <span>{{ userinfo.integral }}</span>
                </div>
                <span>|</span>

            </div>
        </div>
        <!-- 右边成就板块-->
        <div class="achievement">
            <div>
                <h4>个人成就</h4>
            </div>
            <div v-show="userinfo.isExcllent ? userinfo.isExcllent : !userinfo.isExcllent"> <!-- 判断是否为优秀作者-->
                <i class="el-icon-star-on"></i>
                <span>创作者之星</span>
            </div>
            <div>
                <i class="el-icon-thumb"></i>
                <span>文章被点赞 {{ 8808 }}</span>
            </div>
            <div>
                <i class="el-icon-view"> </i>
                <span>文章被阅读{{ 3306 }}</span>
            </div>
            <div class="add">
                <el-button type="primary" plain>点个关注</el-button>
            </div>
        </div>
        <!--中间板块-->
        <div class="middle">
            <div class="nav">
                <div class="navRows">
                    <router-link :to="{ name: 'Post' }">帖子</router-link>
                </div>

                <div class="navRows">
                    <router-link :to="{ name: 'Comment' }">评论</router-link>
                </div>
                <div class="navRows">
                    <router-link :to="{ name: 'Attention' }">关注</router-link>
                </div>

                <div class="navRows">
                    <router-link :to="{ name: 'Fans' }">粉丝</router-link>
                </div>
            </div>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
import instance from '../../utils/request';
export default {
    name: "Personal",

    data() {
        return {
            userinfo: {
                brief: ' 我是一只爱学编程的小鸭子,什么也阻止不了我对编程的热爱', //个人简介
                rank: 'v1',  //账号级别(TODO)
                nickname: '王贝贝', //账号昵称
                gender: '男',   //性别
                articleCount: 0, //文章数量
                likeCount: 0, //获赞数量
                comment: 0, //获得评论数量
                collectCount: 0, //获得收藏数量
                followers: 0, //关注数(TODO)
                fans: 0, //粉丝数(TODO)
                integral: 0, //积分(TODO)
                isExcllent: true, // 是否位创作之星(TODO)
            }
        }
    },
    methods: {
    },
    //在数据加载后从后端获取账号信息
    created() {
        let userId = localStorage.getItem('id');
        instance.get('/user/info?userId=' + userId).then(success => {
            if (success.data.code == 1000) {
                this.userinfo = success.data.data
            } else {
                Message.error("板块数据获取错误，请稍后重试");
                console.log(success.data);
            }

        }).catch(error => {
            Message.error('模板数据获取异常，请稍后重试');
            console.log(error);

        })
    },
}
</script>

<style scoped>
.personalPage {
    position: relative;
}

.achievement {
    width: 15%;
    position: absolute;
    top: 30px;
    right: 20px;
    background-color: rgba(250, 250, 250, 0.9);
    text-align: center;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.achievement>div {
    margin-top: 15px;
}


a {
    text-decoration: none;
    color: black;
}

.top {
    margin: 10px auto;
    width: 60%;
    background-color: rgba(255, 255, 255, 0.8);
    height: 220px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

img {
    height: 80px;
    width: 80px;
    margin: 20px;
    border-radius: 40px;
}

.compile {
    position: absolute;
    right: 10px;
    top: 10px;
}

.head {
    width: 100%;
    height: 150px;
    display: flex;
    position: relative;
    border-bottom: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-bottom-style: solid
}

.name {
    width: 200px;
    height: 20px;
    margin-top: 20px;
    margin-left: 0px;
    display: flex;
    flex-wrap: wrap;

}

.nickname {
    color: rgba(0, 0, 0, .85);
    font-weight: 600;
    font-size: 20px;
}

.grade {
    color: green;
    width: 30px;
    height: 20px;
    margin-top: 5px;
    margin-left: 15px;
    border: 1px solid rgb(66, 103, 10);
}

.grade>a>span {


    color: green;
    padding-left: 4px;

}

.introduce {
    width: 100%;
    height: 50px;
    position: absolute;
    color: rgba(0, 0, 0, .45);
    margin-top: 70px;
    left: 120px;
    /* word-wrap: break-word; */
    overflow-wrap: break-word;
    
}

.information {

    width: 100%;
    display: flex;
    justify-content: left;
}

.row {
    width: 60px;
    margin: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.row+span {
    color: rgba(50, 50, 50, 0.1);
    margin-top: 30px;

}

.middle {
    width: 60%;
    height: 100%;
    padding-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: 25px auto;
}

.nav {
    width: 100%;
    height: 50px;
    border-bottom: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-bottom-style: solid;
    display: flex;

}

.navRows {
    margin: 10px 20px;
}

.navRows>:hover {
    color: deepskyblue;
}
</style>